<template>
	<a-modal
		:title="handleType === 'add' ? '添加区域' : '修改区域'"
		:visible="visible"
		:confirm-loading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
	>
		<a-form-model ref="areaForm" :model="form" :rules="rules" v-bind="layout">
			<a-form-model-item label="所属市场">
				<!-- v-if="form.marketData && form.marketData.length > 0" -->
				<a-select
					v-model="form.market_id"
					@change="handleMarketChange"
					disabled
					placeholder="请选择"
				>
					<a-select-option
						v-for="(item, index) in form.marketData"
						:key="index"
						:value="item.id"
						>{{ item.name }}</a-select-option
					>
				</a-select>
			</a-form-model-item>

			<a-form-model-item label="区域名称" prop="name" has-feedback>
				<a-input v-model="form.name" placeholder="请输入" />
			</a-form-model-item>
			<a-form-model-item label="区域说明">
				<a-textarea placeholder v-model="form.memo1" :rows="4" />
			</a-form-model-item>
			<a-form-model-item label="选择CP">
				<!-- <a-checkbox-group @change="onChange">
					<a-checkbox value="AA"> A </a-checkbox>
					<a-checkbox value="BB"> B </a-checkbox>
					<a-checkbox value="CC"> C </a-checkbox>
        </a-checkbox-group>-->

				<a-select
					mode="multiple"
					style="width: 100%"
					placeholder="请选择"
					@change="handleChange"
					:value="form.in_cps"
					:autoClearSearchValue="true"
				>
					<a-select-option
						v-for="(item, index) in incpList"
						:key="index"
						:value="item.id"
						>{{ item["name"] }}</a-select-option
					>
				</a-select>
			</a-form-model-item>
		</a-form-model>
	</a-modal>
</template>

<script>
	// import Incp from "@/api/incp"
	import areaHttp from "@/api/area"
	import salemarketHttp from "@/api/salemarket"
	export default {
		name: "handleForm",
		data() {
			this.id = null
			this.handleType = null

			return {
				layout: {
					labelCol: { span: 6 },
					wrapperCol: { span: 12 },
				},

				visible: false,
				confirmLoading: false,
				form: {
					marketData: [],
					in_cps: [],
					// 区域名称
					name: undefined,
					// 区域说明
					memo1: "",
					market_id: parseInt(this.$route.params.id),
					id: "",
				},
				incpList: [],
				rules: {
					name: [{ required: true, trigger: "change", message: "区域名必填" }],
				},
			}
		},

		watch: {
			visible(a, b) {
				if (!a) this.resetFormFields()
			},
		},
		methods: {
			handleMarketChange(value) {
				console.log(`selected ${value}`)
				this.form.in_cps = []
				this.form.market_id = value
				this.form.name = ""
				// 获取市场详情 然后得到区域数据
				this.getMarketDetail(value)
				// 获取市场下场内CP列表
				//   this.getIncp(value)
			},
			handleChange(id) {
				this.form.in_cps = id //[...new Set([...id.split(",")])]
			},
			// onChange(checkedValues) {
			// 	console.log("checked = ", checkedValues)
			// },

			checkRequire(obj) {
				return this.$isEmpty(obj)
			},

			getMarketDetail(id) {
				salemarketHttp
					.select(id)
					.then((res) => {
						console.log("市场详情", res)
						this.incpList = res.data.in_cps
					})
					.catch((err) => {
						console.log(err)
					})
			},

			resetFormFields() {
				this.form = {
					marketData: [],
					in_cps: [],
					// 区域名称
					name: undefined,
					// 区域说明
					memo1: "",
					market_id: parseInt(this.$route.params.id),
					id: "",
				}
				this.incpList = []

				this.$refs.areaForm.resetFields()
			},

			handleOk() {
				this.handleType === "add" ? this.addArea() : this.updateArea()
			},
			addArea() {
				let _this = this
				_this.$refs.areaForm.validate((err, values) => {
					// 验证表单没错误
					if (err) {
						_this.confirmLoading = true
						areaHttp
							.create(
								this.$removeField({
									name: _this.form.name,
									memo1: _this.form.memo1,
									market_id: _this.form.market_id,
									// 少了一个CP字段
									in_cps: _this.form.in_cps.map((id) => {
										return parseInt(id)
									}),
								})
							)
							.then((res) => {
								_this.confirmLoading = false
								if (res.code == 1) {
									_this.$message.success("添加成功")
									_this.$emit("handleOk")
									setTimeout(() => {
										_this.visible = false
									}, 500)
								}
							})
							.catch((e) => {
								_this.confirmLoading = false
							})
					}
				})
			},

			updateArea() {
				let _this = this
				_this.$refs.areaForm.validate((err, values) => {
					// 验证表单没错误
					if (err) {
						_this.confirmLoading = true
						areaHttp
							.update(
								this.form.id,
								this.$removeField({
									name: _this.form.name,
									memo1: _this.form.memo1,
									id: _this.form.id,
									market_id: _this.form.market_id,
									in_cps: _this.form.in_cps.map((id) => {
										return parseInt(id)
									}),
								})
							)
							.then((res) => {
								_this.confirmLoading = false
								if (res.code == 1) {
									_this.$message.success("修改成功")
									_this.$emit("handleOk")
									setTimeout(() => {
										_this.visible = false
									}, 500)
								}
							})
							.catch((e) => {
								_this.confirmLoading = false
							})
					}
				})
			},
			async getMarketData(params = {}) {
				this.form.marketData = []
				await salemarketHttp.query(params).then((response) => {
					console.log("市场列表数据", response)
					if (response.code !== 1) {
						this.$message.warning(response.message)
						return
					}

					if (response.data && response.data.length > 0) {
						this.form.marketData = response.data.map((item) => {
							return {
								id: item.id,
								name: item.name,
							}
						})
					}
				})
			},
			showModal(type, record) {
				console.log(type, record)
				this.handleType = type
				if (type === "update") {
					this.getMarketData()
					this.getMarketDetail(record.market_id)
					this.form = {
						name: record.name,
						memo1: record.memo1,
						market_id: record.market_id,
						id: record.id,
						in_cps: record.in_cps
							? record.in_cps.map((item) => {
									return parseInt(item.id)
							  })
							: [],
					}
					console.log(this.form)
				} else if (type === "add") {
					this.getMarketData()
					this.getMarketDetail(this.form.market_id)
					// this.$refs.areaForm.resetFields()
				}
				this.visible = true
			},

			handleCancel(e) {
				this.visible = false
			},
		},
	}
</script>

<style>
</style>
